//头部和尾部加载
$('header').load('./header.html',()=>{
    (function fn(){
        let session = sessionStorage.getItem('name')-0
        if(!session){
            $('.headeruser').html('登录')
            $('.headerpass').html('注册')
        }else{
            let local = JSON.parse(localStorage.getItem('DELL'))
            let find = local[session]
            // console.log(find.user)
            $('.headeruser').html('欢迎'+ find.user)
            $('.headerpass').attr('href','#')
            $('.headerpass').html('退出').on('click', function () {
                $('.headeruser').html('登录')
                $('.headerpass').html('注册')
                // .attr('href','../html/register.html')
                sessionStorage.removeItem('name')
                
            })
            
        }
        
    }())
})
        $('footer').load('./footer.html',()=>{
            $('.gocart').on('click',function(){
                let user = document.querySelector('.headeruser').innerHTML
                let localuser = JSON.parse(localStorage.getItem('DELL'))
                let res = localuser.some(item=>{return '欢迎'+item.user == user})
                
                if(!res){
                    alert("您还未登陆！")
                    $('.gocart').attr('href','#')
                }
            })
        })



        // 拿到sessionstorage里面的商品数据，并把它渲染在购物车里面
        let goods = JSON.parse(sessionStorage.getItem('goods'))
        let goodsul = document.querySelector('.cartlist')
        goods.forEach(item=>{
            goodsul.innerHTML +=`
                    <div class="cartlistmain">
                        <input type="checkbox" class="select">
                        <div class="maintype">
                            <a href="#"><img src="${item.img_small_logo}" alt=""></a>
                            <ul>
                                <li>
                                    <a href="">${item.title}</a>
                                    <i>${item.category}</i>
                                    <b>${item.goods_id}</b>
                                </li>
                                <li>¥<i>${item.current_price}</i></li>
                                <li>
                                    <div class="reduce">-</div>
                                    <input type="text" value="${item.cart_number}" class="inputquantity">
                                    <div class="add">+</div>
                                </li>
                                <li><i>¥${(item.cart_number*item.current_price).toFixed(2)}</i></li>
                                <li><span class="del">删除</span></li>
                            </ul>
                        </div>
                    </div>
            `

        })


        let shopcart = document.querySelector('.shopcart')
        let checkbox = document.querySelector('.select')
        let add = document.querySelector('.add')
        let reduce = document.querySelector('.reduce')
        let inputquantity = document.querySelector('.inputquantity')
        let del = document.querySelectorAll('.del')
        var select = document.querySelectorAll('.select');
        var selectAll = document.querySelector('.selectall');
        var selectAll1 = document.querySelector('.selectall1');



        // 事件委派
        shopcart.onclick = function(e){
            e = e || window.event;
            var target = e.target || e.srcElement;

            // 委派点击事件
            // 增加
            if(target.className == 'add'){
                let num1 =target.previousElementSibling.value;
                num1++
                target.previousElementSibling.value = num1;
                var re1 = /(\d{1,3})+(?:\.\d+)?/g
                var price = target.parentNode.previousElementSibling.children[0].innerText;
                var str = price.match(re1)[0]-0
                target.parentNode.nextElementSibling.children[0].innerText = "¥"+(num1 * str).toFixed(2);

                // 更改sessionstorage里面的数量
                // 获得此商品的id
                let delid = target.parentNode.previousElementSibling.previousElementSibling.children[2].innerHTML-0
                //获得商品数组
                let list = JSON.parse(sessionStorage.getItem('goods'))
                // 获得此id商品在数组里的位置
                let find = list.findIndex(item=>{
                    return item.goods_id == delid
                })
                let find1 = list.find(item=>{
                    return item.goods_id == delid
                })
                find1.cart_number = num1
                // console.log(delid,list,find,find1)
                // 将此数组中的这个位置的这个商品删除，再把改变数量后的这个数据添加进原来的位置，得到一个新的数组
                list.splice(find,1,find1)
                // 再将这个数组覆盖原先的sessionstorage数组
                sessionStorage.setItem('goods',JSON.stringify(list))

                getSum()
            }
            // 减少
            if(target.className == 'reduce'){
                let num1 =target.nextElementSibling.value;
                num1--
                if(num1<=1){
                    num1 = 1
                }
                target.nextElementSibling.value = num1;
                // 计算小计价格  数量乘以单价
                var re1 = /(\d{1,3})+(?:\.\d+)?/g
                var price = target.parentNode.previousElementSibling.children[0].innerText;
                var str = price.match(re1)[0]-0
                target.parentNode.nextElementSibling.children[0].innerText ="¥"+(num1 * str).toFixed(2);
                
                // 更改sessionstorage里面的数量
                // 获得此商品的id
                let delid = target.parentNode.previousElementSibling.previousElementSibling.children[2].innerHTML-0
                //获得商品数组
                let list = JSON.parse(sessionStorage.getItem('goods'))
                // 获得此id商品在数组里的位置
                let find = list.findIndex(item=>{
                    return item.goods_id == delid
                })
                let find1 = list.find(item=>{
                    return item.goods_id == delid
                })
                find1.cart_number = num1
                // console.log(delid,list,find,find1)
                // 将此数组中的这个位置的这个商品删除，再把改变数量后的这个数据添加进原来的位置，得到一个新的数组
                list.splice(find,1,find1)
                // 再将这个数组覆盖原先的sessionstorage数组
                sessionStorage.setItem('goods',JSON.stringify(list))
                getSum()
            }
            // 单个删除操作
            if(target.className == 'del'){
                    // 得到此条商品的ID，并且得到sessionstorage里面的数组，找到此条商品的位置，并将它删除，返回删除后剩余商品的数组，再重新存入session storage里面，同时删除页面中的这条渲染出来的商品栏
                    // 获得ID
                    let delid = target.parentNode.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling.children[2].innerHTML-0
                    //获得商品数组
                    let list = JSON.parse(sessionStorage.getItem('goods'))
                    // 获得此id商品在数组里的位置
                    let find = list.findIndex(item=>{
                        return item.goods_id == delid
                    })
                    // 将此数组中的这个位置的这个商品删除，得到一个新的数组
                    list.splice(find,1)
                    // 再将这个数组覆盖原先的sessionstorage数组
                    sessionStorage.setItem('goods',JSON.stringify(list))
                    target.parentNode.parentNode.parentNode.parentNode.remove();

                getSum()
            }

            // 清空购物车操作
            if(target.className == 'delall'){
                let delall = document.querySelector('.cartlist')
                // 如果购物车列表存在，则可以清空
                if(delall){
                    delall.remove()
                }
                sessionStorage.removeItem('goods')
                
                selectAll.checked = false
                selectAll1.checked = false
                getSum()
            }

            // 点击结算跳转网页
            if(target.className == 'location'){
                location.href = '#'
            }


            //全选功能
            if(target.className == 'selectall'){
                //拿到全选复选框的状态
                var type = target.checked;
                selectAll1.checked = type
                //遍历拿到的所有的单选按钮改变其状态
                select.forEach(function(item){
                    item.checked = type;
                })
                getSum()
                
            }
            if(target.className == 'selectall1'){
                //拿到全选复选框的状态
                var type = target.checked;
                selectAll.checked = type

                //遍历拿到的所有的单选按钮改变其状态
                select.forEach(function(item){
                    item.checked = type;  
                })
                getSum()
                
            }
            //点击单选按钮给全选框进行状态
            if(target.className == 'select'){
                //会把选中状态的单选框给咱们返回，以伪数组形式
                var len = document.querySelectorAll('.select:checked').length;
                //判断选中状态的单选框和没有选中的单选框的长度一样的时候，表示全部选中了
                if(select.length == len){   
                    selectAll.checked = true;
                    selectAll1.checked = true;
                }else{
                    selectAll.checked = false;
                    selectAll1.checked = false;
                }
                getSum()
            }

            
        }

        // //计算总数量和总价
        function getSum(){
            //商品数量和商品总价变量
            var count = 0;
            var money = 0;
            //只有在选中的时候商品数量和总价发生改变
            var state = document.querySelectorAll('.select:checked');
            //遍历改变数据
            state.forEach(function(item){
                // money里面为¥ 2799.00，需要将数字提取出来
                var re1 = /(\d{1,3})+(?:\.\d+)?/g
                count += Number(item.nextElementSibling.children[1].children[2].children[1].value);
                money += Number((item.nextElementSibling.children[1].children[3].children[0].innerHTML).match(re1)[0]-0);
            })
            //把数量和总价赋值给对应的元素
            var moneyall = document.querySelector('.moneyall')
            var quantall = document.querySelector('.quantall')

            quantall.innerText = count;
            moneyall.innerText = ' ¥ '+ money.toFixed(2);
            return money;
        }